<template>
  <div
    class="msg-text msg-vioce flex"
    @click="audioPaused"
  >
    <div class="wifi-symbol">
      <div class="wifi-circle first" />
      <div class="wifi-circle second" :class="playing ? 'second-play' : ''" />
      <div class="wifi-circle third" :class="playing ? 'third-play' : ''" />
    </div>
    <span v-if="timeLong">{{ timeLong }}''</span>
    <audio
      preload="auto"
      ref="aud"
      :src="audioSrc"
    />
  </div>
</template>

<script>
import { ref, nextTick, watch } from 'vue';
import { useAudio } from './useAudio';
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const aud = ref();

    const playing = ref(false);

    const { audioSrc, setAudioSrc } = useAudio();

    const timeLong = ref(MillisecondToDate(props.duration) || 0);

    const timeOut = ref();

    //重置语音时间状态
    function resetRadio() {
      timeLong.value = MillisecondToDate(props.duration) || 0;
      aud.value.load();
      playing.value = false;
      clearInterval(timeOut.value);
    }

    function countDown() {
      clearInterval(timeOut.value);
      timeOut.value = setInterval(() => {
        timeLong.value--;
        if (timeLong.value == 0) {
          resetRadio();
        }
      }, 1000);
    }

    watch(audioSrc, () => {
      if (audioSrc.value !== props.url) {
        resetRadio();
      }
    });

    //点击语音
    function audioPaused() {
      setAudioSrc(props.url);
      nextTick(() => {
        let audio = aud.value;
        if (audio !== null) {
          if (audio.paused) {
            audio.play(); // 播放
            playing.value = true;
            countDown();
          } else {
            audio.pause(); // 这个就是暂停
            playing.value = false;
            clearInterval(timeOut.value);
          }
        }
      });
    }

    function MillisecondToDate(mss) {
      if (!mss) {
        return;
      }
      let seconds = Math.ceil((mss % (1000 * 60)) / 1000);
      return seconds;
    }

    return {
      audioPaused,
      aud,
      playing,
      timeLong,
      audioSrc,
      MillisecondToDate
    };
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.wifi-symbol {
  width: 50px;
  height: 50px;
  overflow: hidden !important;
  // transform: rotate(135deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0) rotate(135deg);
}
.wifi-circle {
  border: 4px solid #373d52;
  border-radius: 50%;
  position: absolute;
}

.first {
  width: 5px;
  height: 5px;
  background: #373d52;
  top: 45px;
  left: 45px;
}

.second {
  width: 25px;
  height: 25px;
  top: 35px;
  left: 35px;
}

.third {
  width: 40px;
  height: 40px;
  top: 25px;
  left: 25px;
}

.second-play {
  animation: fadeInOut 1s infinite 0.2s;
}

.third-play {
  animation: fadeInOut 1s infinite 0.4s;
}

@keyframes fadeInOut {
  0% {
    opacity: 0; /*初始状态 透明度为0*/
  }
  100% {
    opacity: 1; /*结尾状态 透明度为1*/
  }
}
</style>